<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
    <h2>基本信息</h2>
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名" prop="nickname" verify>
            <el-input v-model="form.nickname" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属组织" prop="dept.name">
            <el-input v-model="form.dept.name" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="变更到" prop="newDept" verify>
            <!-- <mobilizeDialog ref="roleUser" :list=[] > </mobilizeDialog> -->
            <div class="border">
              <el-tag v-for="item in form.newDept" :key="item.id" closable @close="handleRemove(item)">{{ item.name
              }}</el-tag>
            </div>
            <div class="add">
              <el-button style="width: 130px;height: 30px" v-preventReClick plain size="small" icon="el-icon-plus"
                @click="handleinit()">选择组织</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="变更说明" prop="textarea" :verify="verifyName">
            <el-input type="textarea" class="margin-top" :autosize="{ minRows: 3, maxRows: 5 }" :rows="3"
              placeholder="请输入内容" show-word-limit resize="none" maxlength="100" v-model="textarea">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <userDialog ref="userDialog" :title="userTitle" @emitplayer="emitplayer"></userDialog>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>
      <el-button v-preventReClick @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import userDialog from "@/components/common/userDialog/index.vue"
import Treeselect from "@riophae/vue-treeselect";
import organization from "@/components/common/userDialog/index.vue"
import mobilizeDialog from "@/components/common/mobilizeDialog/index.vue"
import { setUserVary } from "@/api/system/user";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { dataTool } from 'echarts';
export default {
  components: { Treeselect, organization, mobilizeDialog, userDialog },
  data() {
    return {
      userTitle: '待调动组织',
      title: '人员变更',
      form: {
        sex: '内部',
        status: '在职',
        dept: {},
        newDept: []
      },
      textarea: '',
      open: false
    }
  },
  methods: {

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id
      getRole(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改角色";
      });
    },
    handleadd(form) {
      this.form = form
      this.form.oldDeptId = form.dept.id
      console.log(this.form, '-----gorm---')
      this.open = true;
      this.title = "人员变更";
    },
    //组织回调
    emitplayer(item = []) {
      console.log(item, 'item----');
      this.$set(this.form, 'newDept', item)
    },
    handleRemove(val) {
      this.form.newDept.splice(val, 1);
      console.log(this.form.newDept, 'this.jianli3-', val)
      //delete this.form.newDept  
    },
    handleinit() {
      this.$refs.userDialog.init('', this.form.newDept || [], this.form.oldDeptId)
    },
    /** 提交按钮 */
    submitForm: function () {
      if (!this.form.newDept || this.form.newDept.length < 1) {
        this.$modal.msgError("还未选择变更到的组织");
        return
      } else {
        let data = {
          oldDeptId: this.form.oldDeptId,
          newDeptId: this.form.newDept[0].id,
          id: this.form.id,
          newDeptName: this.form.newDept[0].name,
          oldDeptName: this.form.dept.name,
          varyExplain: this.textarea,
          username: this.form.username
        }
        console.log(data, '----222')
        setUserVary(data).then(response => {
          this.$modal.msgSuccess("修改成功");
          console.log(response.data)
          this.open = false;
          this.$parent.getList()
        });

      }

    },
    // 取消按钮
    cancel() {
      this.open = false;
      //this.form = []
    },
    verifyName(rule, val, callback) {
      if (val) {
        let re = /^[\u4E00-\u9FA5A-Za-z]+$/;
        if (!re.test(val)) callback(Error('支持中文、英文（区分大小写）'));
        else callback();
      } else {
        callback();
      }
    },
  },
  created() { }
}
</script>
<style scoped>
.border {
  width: 60%;
  float: left;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #e7e8eb;
}

.add {
  display: inline-block;
  margin-left: 10px;
}
</style>